import {
  Button,
  Col,
  Drawer,
  Form,
  Input,
  Row,
  Select,
  message,
  Card,
} from 'antd';
import React, { useEffect } from 'react';
import { useRequest } from 'umi';
import { ConfigMapService } from '../../service';
import { ConfigMap } from '../../vms';
import CodeMirror from '@uiw/react-codemirror'

const ConfigMapDetail: React.FC<{
  isCreate: boolean
  open: boolean
  record?: ConfigMap
  namespaces:
  | {
    label: string;
    value: string;
  }[]
  | undefined;
  onClose: () => void;
  onSuccess: () => void;
}> = ({ open, namespaces, isCreate, record, onClose, onSuccess }) => {

  const [form] = Form.useForm();
  const save = useRequest(isCreate ? ConfigMapService.create : ConfigMapService.update, {
    manual: true,
    onSuccess: () => {
      message.success('保存成功～')
      if (onSuccess) {
        onSuccess();
      }
      form.resetFields();
      onClose();
    },
  });

  const closeHandle = () => {
    onClose()
    if (!isCreate) {
      form.resetFields()
    }
  }

  const onFinish = (values: any) => {
    console.log('Received values of form:', values);
    const data = { name: values.name, namespace: values.namespace, data: { [values.filename]: values.conf } }
    console.log(data);
    save.run(data);
  };


  useEffect(() => {
    if (open && !isCreate) {
      form.setFieldsValue({
        namespace: record?.namespace,
        name: record?.conf_name,
        filename: Object.keys(record?.cm.data || {})[0],
        conf: Object.values(record?.cm.data || {})[0]
      })
    }
  }, [isCreate, open, record])

  return (
    <>
      <Drawer
        title={isCreate ? "创建部署" : "更新部署"}
        width={720}
        onClose={closeHandle}
        open={open}
        bodyStyle={{ paddingBottom: 80 }}
      >
        <Form
          layout="vertical"
          hideRequiredMark
          form={form}
          onFinish={onFinish}
          initialValues={{
            replicas: 1,
            namespace: 'default',
            is_create_svc: false,
          }}
        >
          <Row gutter={24}>
            <Col span={8}>
              <Form.Item
                name="name"
                label="配置名称"
                rules={[{ required: true, message: '配置名称不能为空' }]}
              >
                <Input disabled={!isCreate} placeholder="ConfigMapName" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                name="namespace"
                label="名称空间"
                rules={[{ required: true, message: '名称空间不能为空' }]}
              >
                <Select
                  disabled={!isCreate}
                  placeholder="namespace"
                  options={namespaces}
                  allowClear
                />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                name="filename"
                label="文件名"
                rules={[{ required: true, message: '配置文件名称不能为空' }]}
              >
                <Input disabled={!isCreate} placeholder="filename" style={{ width: 200 }} />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={24}>
            <Card style={{ width: '100%', marginBottom: 10 }}>
              <Form.Item
                name="conf"
                rules={[{ required: true, message: '文件内容不能为空' }]}
              >
                <CodeMirror />
              </Form.Item>
            </Card>

          </Row>

          <Form.Item>
            <Button loading={save.loading} type="primary" htmlType="submit">
              {isCreate ? "创建" : '更新'}
            </Button>
          </Form.Item>
        </Form>
      </Drawer>
    </>
  );
};

export default ConfigMapDetail;
